<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login Example</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <form class="my-form">
        <div class="login-welcome-row">
            <a href="#" title="Logo">
                <img src="assets/logo.svg" alt="Logo" class="logo">
            </a>
            <h1>You must sign in to join</h1>
        </div>
        <div class="socials-row">
            <a href="#" title="Use Google">
                <img src="assets/google.png" alt="Google">
                Sign in with Google
            </a>
            <a href="#" title="Use Apple">
                <img src="assets/apple.png" alt="Apple">
                Sign in with Apple
            </a>
        </div>
        <div class="lines">
            <div class="line"></div>
            OR
            <div class="line"></div>
        </div>
        <div class="text-field">
            <label for="email">Email</label>
            <input 
                type="email" id="email" name="email" 
                autocomplete="off" placeholder="you@example.com"
                required>
            <div class="error-message">Email in incorrect format</div>
        </div>
        <div class="text-field">
            <label for="password">Password</label>
            <input 
                id="password" type="password" 
                name="password" placeholder="Your password"
                title="Minimum 6 characters at least 1 Alphabet and 1 Number"
                pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$" required
            >
            <div class="error-message">Minimum 6 characters at
                least 1 Alphabet and 1 Number</div>
        </div>
        <button type="submit" class="my-form__button">
            Login
        </button>
        <div class="my-form__actions">
            <div class="my-form__row">
                <span>Don't have an account?</span>
                <a href="#" title="Create Account">
                    Sign Up
                </a>
            </div>
        </div>
    </form>

    <script src="script.js"></script>
</body>

</html>